<template>
	<view class="classify">
		<view class="bg">
			<view class="top">
				<view class="box">
					<view class="list" :class="activeIndex == index? 'active':''" v-for="(item,index) in list"
						:key="index" @click="getList(index,item.type)">{{item.text}}</view>
				</view>
			</view>
			<view class="box">
				<view class="box-top">
					——— <text>{{list[activeIndex].text}}</text> ———
				</view>、
				<view class="box-list">
					<view class="classify-List" v-for="(item,index) in classifyList" :key="index"
						@click="goBookfilter(item.url,item.name)">
						<view class="left">
							{{item.name}}
						</view>
						<view class="right">
							<image :src="item.cover" mode="widthFix"></image>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'classify',
		data() {
			return {
				activeIndex: 0,
				list: [{
						text: '男生',
					},
					{
						text: '女生',
					},
					{
						text: '出版',
					},
				],
				classifyBigList: [],
				classifyList: []
			};
		},
		methods: {
			getList(index, type) {
				if (this.activeIndex == index) {
					return;
				}
				// uni.showLoading({
				// 	title: '正在加载中'
				// });
				this.activeIndex = index;
				this.classifyList = this.classifyBigList[index].cates
				// if(this.gender == ""){
				// 	this.getNewBook(type)
				// }else{
				// 	this.getBook(this.gender, type);
				// }

			},
			getClassify() {
				uni.request({
					url: 'https://apis.netstart.cn/yunyuedu/mergedCategroy.json',
					method: 'GET'
				}).then(res => {
					// console.log('res ==> ', res);
					this.classifyBigList = res.data
					this.classifyList = this.classifyBigList[0].cates
					console.log(this.classifyList);
					uni.hideLoading()
				}).catch(err => {
					console.log('err ==> ', err);
				})
			},
			goBookfilter(catId,name) {
				catId = catId.split('catId=')
				// console.log(catId[1]);
				uni.navigateTo({
					url: `../bookfilter/bookfilter?cateId=${catId[1]}&name=${name}`
				})
			}

		},
		onLoad() {
			uni.showLoading({
				title: '正在加载中'
			});
			this.getClassify();
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 100%;
		height: 100vh;
		background-image: url('../../static/background-image.png');
		background-repeat: no-repeat;
	}

	.top {
		width: 100%;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: flex-end;

		.box {
			width: 675rpx;
			height: 150rpx;
			background-color: #CEA880;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			.list {
				width: 144rpx;
				height: 62rpx;
				background-color: #FDECD0;
				text-align: center;
				line-height: 62rpx;
				color: #595959;
				font-size: 28rpx;
				border-radius: 62rpx;
				border: 1px solid #FC768A;
			}

			.active {
				color: white;
				background-color: #FE855A;
			}
		}


	}

	.box {
		width: 100%;
		background-color: #FCECCC;
		// height: 200rpx;
		overflow: hidden;

		.box-top {
			width: 500rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			text-align: center;
			color: rgba(166, 166, 166, 1);

			text {
				color: #000;
				padding: 0 30rpx;
				font-size: 17px;
			}
		}

		.box-list {
			display: flex;
			flex-wrap: wrap;

			.classify-List {
				width: 328rpx;
				height: 140rpx;
				background-color: #F0CEAD;
				border-radius: 20rpx;
				margin-top: 20rpx;
				margin-left: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-evenly;

				.left {
					color: #3b3b3b;
					font-weight: 700;
					font-size: 32rpx;
				}

				.right {
					width: 120rpx;

					image {
						width: 100%;
						display: block;
					}
				}
			}
		}

	}
</style>